<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>菜单列表</title>
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/media/css/select2_metro.css" />
<link rel="stylesheet"
	href="${ctx}/resources/media/css/DT_bootstrap.css" />
	
<%@ include file="../../include/treetable.jsp" %>	
	
</head>
<body>
	<div class="row-fluid profile">
		<div class="span12">
			<!--BEGIN TABS-->
			<div class="tabbable tabbable-custom tabbable-full-width">
				<ul class="nav nav-tabs">
				<c:choose>
					<c:when test="${platform eq 1}">
					<li class="active"><a href="${ctx}/menu/list">菜单列表</a></li>
					</c:when>
					<c:when test="${platform eq 2}">
					<li class="active"><a href="${ctx}/menu/front">菜单列表</a></li>
					</c:when>
					<c:otherwise>
					<li class="active"><a href="${ctx}/menu/merchant">菜单列表</a></li>
					</c:otherwise>
				</c:choose>
					<li><a href="${ctx}/menu/form/${platform}">添加菜单</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane row-fluid active" id="tab_1_1">
						<div class=" responsive" data-tablet="span12 fix-offset">
							<!-- BEGIN EXAMPLE TABLE PORTLET-->
							<div class="portlet box grey">
								<div class="portlet-title">
									<div class="caption">
										<i class="icon-list"></i>菜单列表
									</div>
								</div>
								<div class="portlet-body">
									<table class="table table-striped table-bordered table-hover " 
										id="treeTable">
										<thead>
											<tr >
												<th>名称</th>
												<th>链接</th>
												<th>排序</th>
												<th>可见性</th>
												<th>权限标识</th>
												<th>描述</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${menus }" var="menu">
												<tr id="${menu.id}" pId="${(menu.parent.id ne '1' && menu.parent.id ne '2') ? menu.parent.id : '0'}" class="odd gradeX">
													<td>${menu.name }</td>
													<td>${menu.url }</td>
													<td>${menu.sort }</td>
													<td><span class="label label-${menu.isShow eq 1 ? 'success':'failure' }">${menu.isShow eq 1 ? '可见':'隐藏' }</span> </td>
													<td>${menu.permission }</td>
													<td>${menu.description }</td>
													<td>
														<a href="${ctx }/menu/add/${menu.id}" class="btn mini green">
															<i class="icon-plus-sign"></i> 添加下级
														</a>
														<a href="${ctx}/menu/form/${menu.id}" class="btn mini blue">
															<i class="icon-edit"></i> 编辑
														</a>
														<a href="javascript:;" class="btn mini red">
															<i class="icon-trash"></i> 删除
														</a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!--end tab-pane-->
				</div>
			</div>
			<!--END TABS-->
		</div>
	</div>
	<script type="text/javascript"
		src="${ctx}/resources/media/js/select2.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/resources/media/js/jquery.dataTables.js"></script>
	<script type="text/javascript"
		src="${ctx}/resources/media/js/DT_bootstrap.js"></script>
	<script type="text/javascript">
		$(function() {
			
			$(document).ready(function() {
				$("#treeTable").treeTable({expandLevel : 2});
			});
			
			
			$('#sample_2')
					.dataTable(
							{
								"bLengthChange" : false,
								"bFilter" : false,
								"bInfo" : false,
								// set the initial value
								"iDisplayLength" : 5,
								"bSort" : false,
								"sDom" : "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
								"sPaginationType" : "bootstrap",
								"oLanguage" : {
									"sLengthMenu" : "_MENU_ per page",
									"oPaginate" : {
										"sPrevious" : "上一页",
										"sNext" : "下一页"
									}
								},
								"aoColumnDefs" : [ {
									'bSortable' : false,
									'aTargets' : [ 0 ]
								} ]
							});
			jQuery('#sample_2 .group-checkable').change(function() {
				var set = jQuery(this).attr("data-set");
				var checked = jQuery(this).is(":checked");
				jQuery(set).each(function() {
					if (checked) {
						$(this).attr("checked", true);
					} else {
						$(this).attr("checked", false);
					}
				});
				jQuery.uniform.update(set);
			});
			jQuery('#sample_2_wrapper .row-fluid:first').remove();
			jQuery('#sample_2_wrapper .dataTables_length select').addClass(
					"m-wrap small"); // modify table per page dropdown
			jQuery('#sample_2_wrapper .dataTables_length select').select2(); // initialzie select2 dropdown
		});
	</script>
</body>
</html>